<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="信息设置页面">

    <title>信息设置页面</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" href="/static/vendor/bootstrap/css/bootstrap.min.css"
          rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/dist/css/sb-admin-2.min.css" rel="stylesheet">

    <!-- bootstrap-table -->
    <link th:href="@{/vendor/bootstrap-table/bootstrap-table.min.css}"
          href="/static/vendor/bootstrap-table/bootstrap-table.css" rel="stylesheet" type="text/css">

    <link th:href="@{/vendor/bootstrap3-editable/css/bootstrap-editable.css}"
          href="/static/vendor/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css">

    <link href="/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">


    <!-- Custom Fonts -->
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script th:src="@{/vendor/jquery/jquery.min.js}" src="/static/vendor/jquery/jquery.min.js"></script>


</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/admin/index">信息设置页面</a>
        </div>
        <!-- /.navbar-header -->


        <!--<ul th:include="headMacro::index_top" class="nav navbar-top-links navbar-right"></ul>-->

        <!-- /.navbar-top-links -->

        <div th:include="headMacro::index_side" class="navbar-default sidebar" role="navigation"></div>
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">信息设置页面</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->


        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">

                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="col-md-1">
                            <input type="button" class="btn btn-default"  data-toggle="modal" href="#modal-insertInformation" value="新增信息"  />
                        </div>
                        <table id="informationTable"/>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>

    </div>
    <!-- /#page-wrapper -->

    <div class="modal fade" id="modal-insertInformation">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">新增信息</h4>
                </div>
                <div class="modal-body">
                    <div class="row form-horizontal">

                        <div class="form-group">
                            <label for="title" class="col-lg-2 control-label">标题：</label>
                            <div class="col-lg-8">
                                <input id="title"  class=" form-control input-lg "
                                       placeholder="请输入标题"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="summary" class="col-lg-2 control-label">摘要：</label>
                            <div class="col-lg-8">
                                <textarea id="summary"  rows="4"  class=" form-control input-lg "
                                          placeholder="请输入摘要"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-lg-2 control-label">首图：</label>
                            <div class="input-group">
                                <input type="file" id="imageFile" class="btn btn-default" value="上传">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group col-lg-offset-1">

                                <script type="text/plain" id="myEditor" style="width:550px;height:240px;"></script>
                            </div>
                        </div>



                    </div>


                </div>
                <div class="modal-footer">
                                <button type="button" id="saveInformation" class="btn btn-primary" >保存</button>

                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="modal-modifyInformation">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改信息</h4>
                </div>
                <div class="modal-body">
                    <div class="row form-horizontal">

                        <div class="form-group">
                            <label for="title" class="col-lg-2 control-label">标题：</label>
                            <div class="col-lg-8">
                                <input id="mtitle"  class=" form-control input-lg "
                                       placeholder="请输入标题"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="summary" class="col-lg-2 control-label">摘要：</label>
                            <div class="col-lg-8">
                                <textarea id="msummary"  rows="4"  class=" form-control input-lg "
                                          placeholder="请输入摘要"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-lg-2 control-label">首图：</label>
                            <div class="input-group">
                                <input type="file" id="mimageFile" class="btn btn-default" value="上传">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group col-lg-offset-1">

                                <script type="text/plain" id="mmyEditor"  style="width:550px;height:240px;"></script>
                            </div>
                        </div>



                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" id="modifyInformation" class="btn btn-primary" >保存</button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<!-- /#wrapper -->

<!-- jQuery -->


<!-- Bootstrap Core JavaScript -->
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}" src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script th:src="@{https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js}" src="/static/vendor/bootstrap-table/bootstrap-table.js"></script>
<!--<script th:src="@{/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" src="/static/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>-->

<script th:src="@{/vendor/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js}" src="/static/vendor/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>

<script th:src="@{/vendor/bootstrap3-editable/js/bootstrap-editable.min.js}" src="/static/vendor/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/umeditor.min.js"></script>
<script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="/vendor/metisMenu/metisMenu.min.js"></script>
<script src="/dist/js/sb-admin-2.min.js"></script>

<!-- Custom Theme JavaScript -->
<script>

    var um = UM.getEditor('myEditor');
    var umm = UM.getEditor('mmyEditor');

    $("#saveInformation").on("click", function (event) {

        var formFile = new FormData();

        var imageFile = document.getElementById("imageFile").files[0]; // js 获取文件对象
        if (typeof (imageFile) !== "undefined" && imageFile.size > 0) {
            // formFile.append("action", "UploadVMKImagePath");
            formFile.append("imageFile", imageFile);

        }
        var title = $("#title").val();
        var summary = $("#summary").val();
        var content = UM.getEditor('myEditor').getContent();
        formFile.append("title",title);
        formFile.append("summary",summary);
        formFile.append("content",content);


        $.ajax({
            url: '/company/saveInformation',
            type:'POST',
            data:formFile,
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (datas) {
                alert("保存成功");
            }
        })
    })

    $("#modifyInformation").on("click", function (event) {

        var formFile = new FormData();

        var imageFile = document.getElementById("imageFile").files[0]; // js 获取文件对象
        if (typeof (imageFile) !== "undefined" && imageFile.size > 0) {
            // formFile.append("action", "UploadVMKImagePath");
            formFile.append("imageFile", imageFile);

        }
        var id  = $("#modal-modifyInformation").attr("data-id");
        var title = $("#mtitle").val();
        var summary = $("#msummary").val();
        var content = UM.getEditor('mmyEditor').getContent();
        formFile.append("title",title);
        formFile.append("summary",summary);
        formFile.append("content",content);
        formFile.append("id",id);


        $.ajax({
            url: '/company/saveInformation',
            type:'POST',
            data:formFile,
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (datas) {
                alert("保存成功");
            }
        })
    })

    var informationTable = $("#informationTable").bootstrapTable({
        url: '/company/getInformation',         //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        //sortOrder: "asc",                   //排序方式
        //queryParams: 'clothType=70',//传递参数（*）
        //sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        onEditableSave: function (field, row, oldValue, $el) {
            console.log(row);
        },
        columns: [
            {
                field: 'id',
                title: 'id',
                visible: false

            },

            {
                field: 'title',
                title: '标题',

            }, {
                field: 'summary',
                title: '摘要',

            }, {
                field: 'content',
                title: '内容',
                formatter:function (value,row,index) {
                    var strValue = ""+value;
                    strValue = strValue.replace('img',"")
                    return strValue.substr(0,50)+'...';
                }
            },{
                field: 'imageUrl',
                title: '首图',
                formatter:function (value,row,index) {
                    return '<a target="_blank" href="'+value+'" class="thumbnail"> <img style="height: 30px;" src="'+value+'" alt="..."> </a>'
                }
            },
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                // events: operateEvents,
                formatter: function (value, row, index) {
                    $("#mtitle").val(row['title']);
                    $("#msummary").val(row['summary']);
                    UM.getEditor('mmyEditor').setContent(row['content'], false);
                    $("#modal-modifyInformation").attr("data-id",row['id']);
                    var id  = row['id'];
                    return '<input type="button" id="modifyInformation" data-toggle="modal" href="#modal-modifyInformation" class="btn" data-value="'+row['id']+'" value="修改">'+
                            '<input type="button" onclick="deleteInfo('+id+')" data-toggle="modal" class="btn btn-danger" data-value="'+row['id']+'" value="删除">'
                }
            }]
    });

    function deleteInfo(id) {
        $.ajax({
            url:"/company/deleteInformation?id="+id,
            type:"GET",
            dataType:'json',
            async:false,
            success:function (datas) {
                informationTable.refresh();
            }
        });

    }
</script>
</body>

</html>
